<template>
 <div class="pt-10">
  <div class="goods">
    <h3>充值积分</h3>
    <div class=" wrapper" >
      <div class="scroll flex_r flex_b_c">
        <div :class="['list flex_center flex_c mr-6', active === item.id && 'on']" @click="active = item.id" v-for="item in list" :key="item">
          <p class="count flex_a_c"><img src="/src/assets/img/goods_icon.png" alt="">{{ item.integral }}</p>
          <p>￥{{ item.amount }}</p>
        </div>
      </div>
    </div>
    <div class="btn" @click="onPay">立即充值</div>
  </div>
  <div class="tips flex_center">
    温馨提示：积分为平台向您提供的用于在本平台上进行相关消费的虚拟货币，充值成功后不支持转让，不支持退款，积分可购买的产品/服务范围以本平台相关页面展示的可使用积分购买的产品/服务为准。
  </div>
 </div>
</template>
<script setup>
import payment from '@/utils/payment'
import { orderPay, getGoodsList } from '@/api'
import { ref, reactive, onBeforeMount } from 'vue'
import { showToast, showDialog } from 'vant'
import { useStore } from '@/store/index';
import { storeToRefs } from "pinia";
import { useRouter } from 'vue-router'
let router = useRouter()
const store = useStore();
let list = ref([])
let active = ref(0)
let fnGet = async () => {
  const { code, data } = await getGoodsList()
  if (code === 200) {
    list.value = data
    active.value = data[0].id
  }
}
onBeforeMount(() => {
  fnGet()
})
let onPay = () => {
  const { userInfo } = storeToRefs(store)
  console.log(userInfo.value)
  if (!userInfo.value.token) {
    showDialog({
      title: '温馨提示',
      message: '您还没绑定手机号，请先绑定手机号在充值。',
      confirmButtonText: '去绑定'
    })
    .then(() => {
      router.push('/login')
      // on confirm
    })
    .catch(() => {
      // on cancel
    });
  } else {
    showDialog({
      title: '温馨提示',
      message: `是否为号码${userInfo.value.mobileShow}充值`,
      showCancelButton: true,
      confirmButtonText: '是',
      cancelButtonText: '去更换'
    })
    .then(() => {
      payment(active.value).then(resolve => {
        showToast('充值成功')
      })
    })
    .catch(() => {
      router.push('/login')
    })
  }
  
}
</script>
<style lang="scss" scoped>
.goods {
  width: 355px;
  height: 213px;
  background: #FFFFFF;
  border-radius: 5px;
  margin: 0 auto 0;
  h3 {
    font-family: pf_bold;
    font-size: 16px;
    color: #333333;
    padding-left: 18px;
    line-height: 50px;
  }
  .wrapper {
    height: 73px;
    padding: 0 11px 0 17px;
    overflow-x: scroll;
    overflow-y: hidden;
  }

  .scroll {
    display: inline-flex;
    vertical-align: top;
  }
  .list {
    width: 103px;
    height: 73px;
    background: #F5F5F5;
    border-radius: 2px;
    font-size: 14px;
    color: #333333;
    line-height: 28px;
    text-align: center;
    &.on {
      background: #FFF7EC;
      border-radius: 2px;
      border: 1px solid #DBB989;
    }
    .count {
      color: #E69B3A;
    }
    img {
      width: 16px;
      height: 16px;
      margin-right: 8px;
    }
  }
}
.btn {
  width: 300px;
  height: 44px;
  text-align: center;
  line-height: 44px;
  background: linear-gradient(-57deg, #EFD7B3, #DCB17E);
  border-radius: 22px;
  font-family: pf_bold;
  font-size: 15px;
  color: #7E5621;
  margin: 23px auto 0;
}
.tips {
  padding: 20px;
  width: 355px;
  background: #FFFFFF;
  border-radius: 5px;
  font-size: 12px;
  color: #999;
  line-height: 20px;
  margin: 7px auto 0;



}
</style>